<template>
  <div>
    <el-container class="home-container">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <div>
          流程:
          <el-select v-model="listform" filterable clearable style="width: 130px" size="mini" placeholder="请选择流程" @change="showListFrom">
            <el-option
              v-for="item in processInfo"
              :key="item.id"
              :label="item.processname"
              :value="item.formid">
            </el-option>
          </el-select>
        </div>

        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
        </v-form-render>
        <el-dialog
                :close-on-click-modal="false"
                :visible.sync="formshow"
                style="padding: 0px;"
                width="77%"
                @open="showDo">
          <div style="text-align: left;width: 100%;">
            <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
            </v-form-render>
            <el-button type="primary" @click="submitForm">提交表单</el-button>
            <el-button type="primary" @click="cancelform">取消</el-button>
          </div>
        </el-dialog>
        

      </el-col>
      <el-col :span="2"></el-col>
    </el-container>
  </div>
</template>

<script>


//component javascript
export default {
    data(){
      return {
        row:{},
        formId:'',
        taskId:'',
        nowInstance:'',
        formshow:false,
        formJson:{},
        formData:{},
        optionData:{},
        applys:[],
        processInfo:[],
        listform:''
      }
    },
    mounted: function () {
      this.initData();
    },methods: {
      showDialog(row){
        this.row = row;
        this.formshow = true;
      },
      initData(){
        this.getRequest("/ddm/listProcess").then(resp => {
          this.processInfo = resp.data;
        })
      },
      showListFrom(){
        this.getRequest("/ddm/showListForm/"+this.listform).then(resp => {
          this.$refs.vFormRef.setFormJson(resp.data);
        })
      },
      submitForm() {
        this.$refs.vFormRef.getFormData().then(formData => {
          // Form Validation OK
          let subData = formData;

          console.log(subData);

          this.postRequest("/ddm/completeTask/"+this.nowInstance+"/"+this.formId+"/"+this.taskId,subData,{headers:{
              'Content-Type': 'application/json;charset=UTF-8'}
            }).then(resp => {
              console.log(resp);
              this.formshow=false;
              this.initData();
          })

        }).catch(error => {
          // Form Validation failed
          this.$message.error(error)
        })
      },
      showDo(row){
        this.nowInstance = row.instanceid;
          this.getRequest("/ddm/showTasks/"+row.instanceid).then(resp => {
              if (resp && resp.status == 200) {
                  var data = resp.data;
                    if(data!=null){
                    console.log(data.data);
                    
                    this.formId=data.formId;
                    this.taskId=data.taskId;
                                      
                    this.$nextTick(() => {
                      this.$refs.vFormRef.setFormJson(data.data);
                      this.$refs.vFormRef.setFormData(data.contentValue);
                    })
                    
                  }
              }
          })
      },
      cancelform(){
        this.formshow = false;
      }
}
}

</script>

<style scoped>


</style>
